<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录/注册</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <img src="/网页/IMG/bc.jpg" alt="">
        <div class="panel">
            <div class="content login">
                <div class="switch">
                    <span id='login' class='active'>Login</span><span>/</span><span id='signup'>Sign Up</span>
                </div>
                <form action="">
                    <div id='email' class="input"  placeholder='Email'><input type="text"></div>
                    <div class="input" placeholder='Username'><input type="text"></div>
                    <div class="input" placeholder='Password'><input type="password"></div>
                    <div id='repeat' class="input" placeholder='Repeat'><input type="password"></div>
                    <span>Forget?</span>
                    <button>LOGIN</button>
                </form>
            </div>
        </div>
    </div>
</body>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    $('#login').click(function(){
        $('.switch span').removeClass('active');
        $(this).addClass('active');

        $(this).parents('.content').removeClass('signup');
        $(this).parents('.content').addClass('login');

        $('form button').text('LOGIN')

    })

    $('#signup').click(function(){
        $('.switch span').removeClass('active');
        $(this).addClass('active');

        $(this).parents('.content').removeClass('login');
        $(this).parents('.content').addClass('signup');

        $('form button').text('SIGNUP');
    })

    $('.input input').on('focus',function(){
        $(this).parent().addClass('focus');
    })

    $('.input input').on('blur',function(){
        if($(this).val() === '')
            $(this).parent().removeClass('focus');
    })
</script>
</html>